<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>邮箱验证码登录</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			/* 头部样式 */
			
			.top {
				/*border: solid 1px red;*/
				height: 170px;
			}
			
			#a1 {
				color: #000000;
				display: block;
				margin: 15px 15px;
			}
			
			.top img {
				display: block;
				margin: 15px auto;
			}
			
			#name1 {
				display: block;
				margin: 15px auto;
				font-size: 20px;
				text-align: center;
			}
			/* 中部登录样式 */
			
			.mid {
				height: 250px;
			}
			/* 三个输入框 */
			
			.login-type input {
				width: 300px;
				height: 40px;
				display: block;
				margin: 15px auto;
				border-radius: 20px;
				background-color: #E9EBEC;
				border: none;
			}
			
			.login-type2 {
				width: 300px;
				margin: 0 auto;
			}
			
			.login-type2 input[type=text] {
				width: 155px;
				height: 40px;
				display: block;
				float: left;
				border-radius: 20px;
				background-color: #E9EBEC;
				border: none;
			}
			
			.login-type2 input[type=button] {
				width: 120px;
				height: 40px;
				display: block;
				float: right;
				background-color: #398DEE;
				color: white;
				border-radius: 20px;
			}
			
			.login-type3 {
				margin: 70px auto;
			}
			
			.login-type3 input[type=button] {
				width: 300px;
				height: 40px;
				display: block;
				background-color: #398DEE;
				color: white;
				margin: 0 auto;
				border-color: #EFEFF4;
				border-radius: 20px;
			}
			/* 底部样式 */
			
			.foot {
				width: 100%;
				margin-top: 40%;
				font-size: 13px;
				text-align: center;
				color: gray;
				position: absolute;
				bottom: 2%;
			}
			
			.foot a {
				color: #000000;
			}
		</style>
	</head>

	<body>
		<div class="top">
			<a href="index_login.html" id="a1"><span class="mui-iconmui-icon-arrowleft"></span></a>
			<img src="img/qianbi.png" width="40px" height="40px" />
			<span id="name1">BYTE NOTE</span>
		</div>

		<form class="layui-form" onsubmit="return fuc()">

			<div class="mid">
				<div class="password">

					<div class="login-type">
						<input type="text" placeholder="请输入邮箱号" id="certificate" />
					</div>

					<div class="login-type2">
						<input type="text" placeholder="请输入验证码" id="code" />
						<input type="button" class="yanzhen" value="获取验证码" />
					</div>

					<div class="login-type3">
						<input type="button" lay-submit lay-filter="true" value="登录" id="email_login" />
					</div>

				</div>
				<div class="yanzhen"></div>
			</div>

		</form>

		<div class="foot">
			<span>登录即代表阅读同意<a>服务协议</a></span>
		</div>
	</body>

	
	<script type="text/javascript" src="js/layui/layui.js" ></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script>
		
		
		  function fuc() {
         return false;
        }
		  
		$("#email_login").click(function() {
			if($("#certificate").val() == "") { //判断邮箱
				mui.alert("邮箱不能为空")
				return false;
			}
			if(!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test($("#certificate").val())) {
				mui.alert("请输入正确的邮箱")
				return false;
			}

			if($("#code").val() == "") { //判断验证码
				mui.alert("验证码输入错误")
				return false;
			}

		})

		 layui.use(['form'], function() {
				var $ = layui.$,
				form = layui.form;

			$("body").on("click", ".yanzhen", function() {

				var obj = this;
				$.ajax({
					type: "get",
					data: {
						certificate: $("#certificate").val()
					},
					url: "http://343bdb1.cpolar.io/note-user/certificate/getCode1",
					dataType: "json", //返回的
					success: function(data) {
						if(data.rs) {
							$(".yanzhen").addClass("layui-btn-disabled");
							$('.yanzhen').attr('disabled', "true");
							console.log(data.msg)
							settime(obj);

						} else {
							/*layer.msg(data.msg);*/
							mui.alert(data.msg);
						}
					},
					error: function(msg) {
						console.log(msg);
					}
				});

				var countdown = 60;

				function settime(obj) {
					if(countdown == 0) {
						obj.removeAttribute("disabled");
						obj.classList.remove("layui-btn-disabled")
						obj.value = "获取验证码";
						countdown = 60;
						return;
					} else {
						obj.value = "重新发送(" + countdown + ")";
						countdown--;
					}
					setTimeout(function() {
						settime(obj)
					}, 1000)
				}

			})




					
			form.on('submit(true)', function(data) {

                 var data = {}; //定义一个JQ对象，放添加弹窗表单的信息
			    data.certificate = $("#certificate").val();
			    data.token = $("#code").val();
			  
			  console.log(JSON.stringify(data));
				
				
				mui.plusReady(function() {
                       console.log(123);
					$.ajax({
						url: "http://343bdb1.cpolar.io/note-user/certificate/login1",
						type: 'post',
						data: JSON.stringify(data),
						contentType: 'application/json',
						dataType: 'json',
						success: function(d) {
							if(d.rs) {
								
								plus.storage.setItem("accessToken", d.msg)

								mui.openWindow({
									url: 'tabbar.html',
									//传递的参数
									extras: {
										accessToken: "accessToken",
									}
								})
							} else {
								layer.msg(d.msg);
							}

						}
					});

					return false;
					
	          })
 				
			});

			})
	</script>

</html>